<template>
  <view class="login-container">
    <!-- 动态粒子背景 -->
    <view class="particle-bg"></view>

    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 标题 -->
      <text class="title">Smart Clean</text>

      <!-- 表单区域 -->
      <view class="form-wrapper">
        <!-- 用户名输入 -->
        <view class="input-group" :class="{ active: isUsernameFocused }">
          <uni-icons type="person" size="24" color="#409EFF"></uni-icons>
          <input
            v-model="formData.username"
            class="input"
            placeholder="用户名/手机号"
            @focus="isUsernameFocused = true"
            @blur="isUsernameFocused = false"
          />
        </view>

        <!-- 密码输入 -->
        <view class="input-group" :class="{ active: isPasswordFocused }">
          <uni-icons type="locked" size="24" color="#409EFF"></uni-icons>
          <input
            v-model="formData.password"
            class="input"
            type="password"
            placeholder="输入密码"
            @focus="isPasswordFocused = true"
            @blur="isPasswordFocused = false"
          />
        </view>

        <!-- 记住密码 -->
        <view class="remember-group">
          <label class="checkbox">
            <label class="remember-me">
              <checkbox-group @change="toggleRemember">
                <checkbox :checked="rememberMe" color="#007AFF" />
              </checkbox-group>
              <text>记住我</text>
            </label>
          </label>
        </view>

        <!-- 登录按钮 -->
        <button
          class="login-btn"
          :disabled="!isFormValid || loading"
          @click="handleLogin"
        >
          <text v-if="!loading">立即登录</text>
          <uni-load-more v-else status="loading" color="#fff"></uni-load-more>
        </button>

        <!-- 辅助链接 -->
        <view class="link-group">
          <text @click="navigateTo('forgot')">忘记密码</text>
          <text @click="navigateTo('register')">注册账号</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { http } from '../../utils/requestUtil'
import { login } from '../../utils/tokenUtil'
// 响应式数据
const formData = reactive({
  username: '',
  password: ''
})
const isUsernameFocused = ref(false)
const isPasswordFocused = ref(false)
const loading = ref(false)
const rememberMe = ref(false) // 统一变量名

// 计算属性
const isFormValid = computed(() => {
  return formData.username.length >= 2 && formData.password.length >= 5
})

// 加载本地存储的凭证
onMounted(() => {
  const savedData = uni.getStorageSync('loginData')
  if (savedData) {
    formData.username = savedData.username || ''
    formData.password = savedData.password || ''
    rememberMe.value = savedData.remember || false
  }
})

// 切换记住我的状态
const toggleRemember = (e) => {
  rememberMe.value = e.detail.value.length > 0
}

// 登录逻辑
const handleLogin = async () => {
  if (!isFormValid.value) return
  loading.value = true
  try {
    login(formData.username,formData.password)
	
      // 记住密码处理
      if (rememberMe.value) {
        uni.setStorageSync('loginData', {
          username: formData.username,
          password: formData.password,
          remember: true
        })
      } else {
        uni.removeStorageSync('loginData')
      }
   
  } catch (error) {
	  // console.log(error)
    // uni.showToast({ title: '网络连接异常', icon: 'none' })
  } finally {
  
	loading.value=false
	isFormValid.value=false
  }
}

// 导航方法
const navigateTo = (type) => {
  const routes = {
    forgot: '/pages/auth/forgot',
    register: '/pages/auth/register'
  }
  uni.navigateTo({ url: routes[type] })
}
</script>

<style>
.login-container {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 粒子背景动画 */
.particle-bg {
  position: absolute;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, #6B73FF 0%, #000DFF 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 5%);
  animation: particleFlow 20s linear infinite;
  opacity: 0.8;
}

@keyframes particleFlow {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

.login-card {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 40rpx;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.title {
  display: block;
  text-align: center;
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 60rpx;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  border-bottom: 2px solid #eee;
  transition: border-color 0.3s;
}

.input-group.active {
  border-color: #409EFF;
}

.input {
  flex: 1;
  height: 80rpx;
  padding-left: 20rpx;
  font-size: 28rpx;
  background: transparent;
}

.remember-group {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
}

.checkbox {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.checkbox input {
  margin-right: 10rpx;
  width: 30rpx;
  height: 30rpx;
}

/* 记住我样式 */
.remember-me {
  display: flex;
  align-items: center;
}

.login-btn {
  height: 90rpx;
  line-height: 90rpx;
  background: #409EFF;
  color: #fff;
  border-radius: 45rpx;
  margin-top: 40rpx;
  font-size: 32rpx;
  transition: all 0.3s;
}

.login-btn[disabled] {
  background: #a0cfff;
  opacity: 0.7;
}

.link-group {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  color: #999;
  font-size: 24rpx;
}

.link-group text {
  padding: 10rpx 20rpx;
  transition: color 0.3s;
}

.link-group text:active {
  color: #409EFF;
}
</style>